<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>拦截器练习</h1>
    <input type="text" id="ipt">
    <button id="btn">提交</button>
    <button id="btn2">取消提交</button>

    <script>
        // 拦截练习
        /*  function lanjie() {
            const myAxios = axios.create({
                baseURL: "/",
                timeout: 10000,
                headers: {}
            })
            // 请求拦截器
            myAxios.interceptors.request.use((confing) => {
                // 在发送亲求之前做些什么
                // 1获取token,并让请求头携带token
                const token = "lkhsdalkhjflsa.asdasfadsfdasf.asfasfasdfasdf";
                // 给请求体添加token属性
                confing.headers.token = token
                return confing
            }, (err) => {
                // 如果请求错误则返回一个失败的promise实例，错误信息会给到catch处理
                return Promise.reject(error)
            })

            // 响应拦截器
            myAxios.interceptors.response.use((response) => {
                // 对请求道的结果进行处理，只拿正确的信息，如果错误的信息直接交给异常处理
                if (response.data.code !== 10000) {
                    return Promise.reject(response.data.msg)
                }
                // 第一个data是完整的响应体第二个为响应体里面的数据
                return response.data.data
            }, (error) => {
                // 失败返回失败的promise实例值为错误信息
                return Promise.reject(error)
            })

            const oIpt = document.getElementById('ipt')
            const oBtn = document.getElementById('btn')

            // 点击发送ajax
            oBtn.onclick = async function () {
                const iptValue = oIpt.value;
                // console.log(iptValue);
                try {
                    const re = await myAxios.get('/user', {
                        params: {
                            userId: iptValue
                        }
                    })
                    console.log(re);
                } catch (e) {
                    console.log('错误', e);
                }
            }

        }
        lanjie()
 */


        //  分割,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

        /* function lanjie2() {

            const oipt = document.getElementById("ipt")
            const btn = document.getElementById("btn")
            const btn2 = document.getElementById("btn2")
            // 1拿到一个取消请求的对象(是一个构造函数)
            const CancelToken = axios.CancelToken;
            let cancel=null
            // 创建axios分身
            const myAxios = axios.create({
                baseURL: 'http://127.0.0.1:3000',
                timeout: 10000
            })
            
            // 点击发送请求
            btn.onclick = async function () {
                const iptvalue = ipt.value
                try {
                    const re = await myAxios.get("/user1", {
                        params: {
                            userId: iptvalue
                        },
                        //在配置对象中配置一个cancelToken的配置项,值是实例化的CancelToken对象
                        cancelToken: new CancelToken((c) => {
                            // c是取消请求的函数因为在函数内部想调用的在全局中声明一个变量作为调用的开关
                            cancel = c
                        })
                    })
                    // axios返回一个promise,re就是这个promise的值
                    console.log('re', re);
                } catch (e) {
                    console.log(e.massage);
                }
            }

            btn2.onclick=function(){
                cancel()
            }
        }
        lanjie2() */

        //。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

        // 取消请求
        const oipt = document.getElementById("ipt")
        const btn = document.getElementById("btn")
        const btn2 = document.getElementById("btn2")


        const cancel = null
        const myAxios = axios.create({
            baseURL: "http://127.0.0.1:3000"
        })
        const CancelToken = axios.CancelToken;

        btn.onclick = async function () {
            const iptvalue = oipt.value
            console.log(iptvalue);
            try {
                const re = await myAxios.get("/user1", {
                    params: {
                        userId: iptvalue
                    },
                    cancelToken: new CancelToken((c) => {
                        cancol = c
                    })
                })
                // console.log("re", re);
            } catch (e) {
                console.log(e.massage);
            }
        }

        btn2.onclick = function () {
            cancel()
        }
    </script>
</body>

</html>